<template>
    <Myhead title="我的点赞"></Myhead>
    <div>

        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" @change="changeleft" />
            <van-dropdown-item v-model="value2" :options="option2" @change="changeright" />
        </van-dropdown-menu>

    </div>
    <div class="box">
        <template v-if="list.length > 0">
            <div class="hot-recommend" @click="particulars(item)" v-for="(item, index) in list" :key="index">
                <h2>
                    {{ item.travel.title }}
                </h2>
                <p>
                    <van-icon name="chat-o">
                        {{ item.travel.address }}
                    </van-icon>
                </p>
                <p class="time">
                    <van-icon name="chat-o">
                        {{ item.travel.time }}
                    </van-icon>
                    <van-icon name="chat-o">
                        热度 : {{ item.travel.hot }}
                    </van-icon>
                </p>
                <div class="lable">
                    <van-tag v-for="tag, index in item.travel.tags" :key="index" type="primary">
                        {{ tag.label }}
                    </van-tag>
                </div>
                <div v-for="v, i in item.travel.imgs" :key="i">
                    <div>
                        <van-image class="recommend-image" :src="v.url.replace('public', 'http://81.69.235.62:3000')" />
                    </div>
                </div>
                <div>
                    <p>{{ item.travel.content }}</p>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="empty">
                <van-empty image-size="300" image="https://bpic.51yuansu.com/pic3/cover/00/62/60/5897e9b200b14_610.jpg"
                    description="暂无数据" />
                <p class="empty-p">你貌似没有喜欢的作品</p>
            </div>
        </template>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { GetUserLikeList } from './userapi';
import { useRouter } from 'vue-router';
import moment from 'moment';

const router = useRouter()
const list = ref([])
const value1 = ref(0)
const value2 = ref('a')
const option1 = [
    { text: '默认排序', value: 0 },
    { text: '热度升序', value: 1 },
    { text: '热度降序', value: 2 },
]
const option2 = [
    { text: '默认排序', value: 'a' },
    { text: '时间升序', value: 'b' },
    { text: '时间降序', value: 'c' },
];

const changeleft = (value) => {
    if (value == 1) {
        list.value.sort((a, b) => {
            return a.travel.hot - b.travel.hot
        })
    } else if (value == 2) {
        list.value.sort((a, b) => {
            return b.travel.hot - a.travel.hot
        })
    } else {
        list.value.sort((a, b) => {
            return a.travel.hot - b.travel.hot
        })
    }
}
const changeright = (value) => {
    if (value == 'b') {
        list.value.sort((a, b) => {
            const dataa = new Date(moment(a.travel.time).format("YYYY-MM-DD HH:mm:ss"))
            const datab = new Date(moment(b.travel.time).format("YYYY-MM-DD HH:mm:ss"))
            const atim = dataa.getTime()
            const btime = datab.getTime()
            return atim - btime
        })
    } else if (value == 'c') {
        list.value.sort((a, b) => {
            const dataa = new Date(moment(a.travel.time).format("YYYY-MM-DD HH:mm:ss"))
            const datab = new Date(moment(b.travel.time).format("YYYY-MM-DD HH:mm:ss"))
            const atim = dataa.getTime()
            const btime = datab.getTime()
            return btime - atim
        })
    } else {
        list.value.sort((a, b) => {
            const dataa = new Date(moment(a.travel.time).format("YYYY-MM-DD HH:mm:ss"))
            const datab = new Date(moment(b.travel.time).format("YYYY-MM-DD HH:mm:ss"))
            const atim = dataa.getTime()
            const btime = datab.getTime()
            return btime - atim
        })
    }
}


const getlist = async () => {
    const res = await GetUserLikeList({ flag: true })
    console.log(res);
    if (res.data.code == 200) {
        list.value = res.data.result
        console.log(list.value);
    }
}

const particulars = (e,) => {
    console.log(e.travel.author._id);
    router.push({
        name: 'particulars',
        query: {
            id: e.tid
        }
    })
}
onMounted(() => {
    getlist()
})
</script>

<style lang="scss" scoped>
.empty {
    padding: 150px 0;

    .van-empty {
        padding-bottom: 20px;
    }

    &-p {
        text-align: center;
        font-size: 15px;
        color: #969799;
    }
}

.hot-recommend {
    background-color: #c2bebe;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    margin-top: 20px;
    margin-bottom: 20px;

    .time {
        display: block;
        display: flex;
        justify-content: space-between;
    }

    p {
        margin-top: 10px;
    }

    .lable {
        .van-tag {
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }

    .recommend-image {
        .van-image__img {
            width: "95%";
            height: '1000px'
        }

    }

    .recommend-images {
        width: "200px";
        height: '500px'
    }

}
</style>